<template>
  <div class="outputField">
    <div class="outputField-header">
      <div class="outputField_title">
        输出字段列表
      </div>
      <a-button type="primary" icon="plus" @click="onSetOutput">新建</a-button>
    </div>
     <a-table
      :columns="columns"
      :data-source="columnsTable"
      :pagination="false"
      rowKey="id"
      size="middle"
    >
      <span slot="action" slot-scope="row">
        <a @click="onUpdateOutput(row)">编辑</a>
        <a-divider type="vertical" />
        <a @click="onDeleteOutput(row)">删除</a>
      </span>
    </a-table>

    <a-modal v-model="visible" :title="title" @ok="handleOk" okText="确定" cancelText="取消" :maskClosable="false">
      <!-- 表单 -->
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <!-- 字段名 -->
        <a-form-model-item ref="name" label="字段名" prop="name">
          <a-input v-model="form.name" placeholder="请输入字段名" />
        </a-form-model-item>
        <!-- 显示名 -->
        <a-form-model-item ref="displayName" label="显示名" prop="displayName">
          <a-input v-model="form.displayName" placeholder="请输入显示名"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
const columns = [
    {
      title: '字段名',
      dataIndex: 'name',
      align: 'center'
    },
    {
      title: '字段显示名',
      dataIndex: 'displayName',
      align: 'center'
    },
    {
      title: '操作',
      align: 'center',
      scopedSlots: { customRender: 'action' },
      width: 100
    }
]
  export default {
    data() {
      return {
        columns,
        columnsTable: [],
        timeBln: null,
        indicators: [],
        visible: false,
        title: '添加输出字段',
        saveForm: {},
        rules: {
          name: [
            { required: true, message: '请输入字段名', trigger: 'blur' },
            { max: 100, message: '最大长度为100个字符', trigger: 'blur'  }
          ],
          displayName : [
            { required :true, message: '请输入显示名', trigger: 'blur' },
            { max: 100, message: '最大长度为100个字符', trigger: 'blur'  }
          ]
        },
        form: {},
        properties: []
      }
    },
    watch: {
      columnsTable:{
        handler (val) {
          this.queryForm.output = JSON.parse(JSON.stringify(val))
        },
        deep: true
      },
      visible (val) {
        if (!val) {
          this.form = {}
        }
      }
    },
    props: ['queryForm'],
    computed: {
      ...mapState('analyseType', ['measures', 'events', 'propertiesEvent', 'propertiesUser']),
    },
    methods: {
      onSetOutput () {
        this.title = '添加输出字段'
        this.visible = true
      },
      onUpdateOutput (row) {
        this.title = '编辑输出字段'
        this.visible = true
        this.form = { ...row }
        this.saveForm = { ...row }
      },
      onDeleteOutput (row) {
        this.columnsTable.forEach((item, index) =>{
          if (item.name == row.name && item.displayName == row.displayName) {
            this.columnsTable.splice(index, 1)
          }
        })
      },
      handleOk () {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            let currentData = {...this.form}
            if (this.title == '添加输出字段') {
              this.columnsTable.push(currentData)
            } else {
              this.columnsTable.forEach((item,index) => {
                if (item.name == this.saveForm.name) {
                  this.columnsTable.splice(index, 1, currentData)
                }
              })
            }
            this.visible = false
          }
        })
      },
    },
    mounted() {
      this.columnsTable = this.queryForm.output ? this.queryForm.output : []
    },
  }
</script>

<style scoped>
.outputField_title {
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
  color: rgba(0,0,0,.85);
}

.outputField-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  margin-top: 12px;
}
</style>
